<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ page isELIgnored ="false" %> 
<%@ taglib uri="http://java.sun.com/jsp/jstl/core"  prefix="c" %>
<%
    response.setHeader("Cache-Control", "no-store"); //HTTP 1.1    
    response.setHeader("Pragma", "no-cache"); //HTTP 1.0    
    response.setDateHeader("Expires", 0); //prevents caching at the proxy server    
%>
<!DOCTYPE html>
<html>
    <head>
        <title>HTML5 and jQuery Mobile</title>
        <link rel="stylesheet" href="${applicationScope.webApp.root}/css/jquery.mobile.min.css" />
        <script src="${applicationScope.webApp.root}/js/json2.js"></script>
        <script src="${applicationScope.webApp.root}/js/jquery.min.js"></script>
        <script src="${applicationScope.webApp.root}/js/jquery.mobile.min.js"></script> 
    </head>
    <body id="body"> 
        <div data-role="page" id="page1"> 
            <div data-role="header">
                <a id='titleLeft' href="${applicationScope.webApp.root}/menu?command=menuList" data-role="button" data-theme="a" data-icon="arrow-l">返回</a>
                <h1 id="title">菜品列表</h1>
                <a id='titleRight' href="${applicationScope.webApp.root}/course?command=courseInfo&menuId=${param.menuId}" data-role="button" data-theme="a" data-icon="plus">新增菜品</a>
            </div>
            <div data-role="content"> 
                <div class="content-primary">	
                    <ul data-role="listview" data-inset="true">
                        <c:forEach items="${requestScope.courses}" var="entry">
                            <li status="already" data-role="list-divider">${entry.key.name}</li> 
                            <c:forEach items="${entry.value}" var="course">
                                <li style="height: 100px">
                                    <div>
                                        <a href="${applicationScope.webApp.root}/image?command=form&menuId=${course.menu.id}&courseId=${course.id}&type=course&mode=landscape">
                                            <img style="position:absolute; top: 20px; left: 5px;" src="${applicationScope.webApp.root}/images/${course.menu.id}/${course.smallLandscape}" /> 
                                        </a>
                                        <a href="${applicationScope.webApp.root}/image?command=form&menuId=${course.menu.id}&courseId=${course.id}&type=course&mode=portrait">
                                            <img style="position:absolute; top: 7px; left: 125px;" src="${applicationScope.webApp.root}/images/${course.menu.id}/${course.smallPortrait}" /> 
                                        </a>
                                    </div>
                                    <h3 style="position:absolute; top: 25px; left: 250px; font-size: 30px">${course.name}</h3>
                                    <div style="position:absolute; top: 30px; right: 10px;">
                                        <a href="${applicationScope.webApp.root}/course?command=courseInfo&courseId=${course.id}" data-role="button" data-theme="b" data-icon="arrow-r">编辑</a>
                                    </div>
                                </li>
                            </c:forEach>
                        </c:forEach>
                    </ul> 
                </div><!--/content-primary --> 
            </div><!-- /content --> 
        </div>
    </body>
</html>
